﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>某某家具设计公司企业官网-模板之家</title> ﻿
</head>
<body>
	<!-- 引入头部 -->
	<jsp:include page="header.jsp"></jsp:include>
	<div class="am-slider am-slider-default"
		data-am-flexslider="{playAfterPaused: 8000}">
		<ul class="am-slides">
			<c:forEach items="${banList }" var="lun">
				<li><img src="${lun.url }" alt="${lun.title }"></li>
			</c:forEach>
		</ul>
	</div>
	<section class="pro-list">
		<aside class="pro-leftsidebar">
			<ul>
				<li><a>产品搜索</a>
					<ul id="pro-search">
						<li><form method="post" action="FurnServlet?method=ToPname">
								<input type="text" class="pro-search" name="cha">
								<button type="submit" class="layui-btn layui-btn-xs">搜索</button>
							</form></li>
					</ul></li>
				<!-- 类型开始 -->
				<li><a>产品分类</a>
					<nav>
						<ul id="pro-category">
							<c:forEach items="${allProtype }" var="pty">
								<li class=""><a
									href="FurnServlet?method=getProByIype&protype=${pty.id }">${pty.typename }</a></li>
							</c:forEach>
						</ul>
					</nav></li>

				<!-- 类型结束 -->
			</ul>
		</aside>

		<aside class="pro-rightsidebar">
			<header>
				<p></p>
				<div class="product-nav">
					<a href="index.html">首页 </a>&#62;<a
						href="FurnServlet?method=toProduct">产品展示</a>&#62;
					<c:forEach items="${details }" var="ming">
						<a>${ming.proname }</a>
					</c:forEach>
				</div>
			</header>
			<main> <!-- 详情业展示的产品大图开始 -->
			<div class="pro-right-left">
				<div class="pro-details-img">
					<c:forEach items="${details }" var="tu">
						<img src="${tu.picurl }">
					</c:forEach>
				</div>
				<!-- 详情业展示的产品大图结束 -->

				<!-- 产品轮播图开始 -->
				<div class="pro-detalis-carousel">
					<div class="am-slider am-slider-default am-slider-carousel"
						data-am-flexslider="{itemWidth: 112, itemMargin: 4,move:5,  controlNav: false ,  slideshow: true}">
						<ul class="am-slides pro-details">
							<c:forEach items="${imgListBypId }" var="tu">
								<li><img src="${tu.url }" /></li>
							</c:forEach>
						</ul>
					</div>
				</div>
				<!-- 产品轮播图结束 -->
			</div>
			<div class="pro-right-right">
				<ul class="pro-right-info-constant">
					<li>产品名称:</li>
					<li>产品材质:</li>
					<li>产品售价:</li>
					<li>市场价:</li>
				</ul>
				<!-- 产品名称、材质、售价和市场价 -->
				<ul class="pro-right-info-variable">
					<c:forEach items="${details }" var="xinxi">
						<li>${xinxi.proname }</li>
						<li>${xinxi.material }</li>
						<li>${xinxi.price }</li>
						<li>${xinxi.market }</li>
					</c:forEach>
				</ul>
			</div>

			<div class="am-tabs pro-tabs" data-am-tabs>
				<ul class="am-tabs-nav am-nav am-nav-tabs">
					<li class="am-active"><a href="#tab1">详细说明1</a></li>
					<li><a href="#tab2">详细说明2</a></li>
				</ul>

				<div class="am-tabs-bd">
					<div class="am-tab-panel am-active" id="tab1">
						<ul>
							<c:forEach items="${details }" var="xiang">
								<li><span class="pro-tabs-constant">品牌:</span> <span
									class="pro-tabs-variable">${xiang.brand }</span></li>
								<li><span class="pro-tabs-constant">是否组装:</span> <span
									class="pro-tabs-variable">${xiang.zuZhuang }</span></li>
								<li><span class="pro-tabs-constant">是否可定制:</span> <span
									class="pro-tabs-variable">${xiang.dingzhi }</span></li>
								<li><span class="pro-tabs-constant">型号:</span> <span
									class="pro-tabs-variable">${xiang.model }</span></li>
							</c:forEach>
						</ul>
					</div>
					<div class="am-tab-panel" id="tab2">
						<ul>
							<c:forEach items="${details }" var="xiang">
								<li><span class="pro-tabs-constant">颜色分类:</span> <span
									class="pro-tabs-variable">${xiang.color }</span></li>
								<li><span class="pro-tabs-constant">设计元素:</span> <span
									class="pro-tabs-variable">${xiang.element }</span></li>
								<li><span class="pro-tabs-constant">风格:</span> <span
									class="pro-tabs-variable">${xiang.style }</span></li>
								<li><span class="pro-tabs-constant">款式定位:</span> <span
									class="pro-tabs-variable">${xiang.positioning }</span></li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			</main>
		</aside>
	</section>
	<!--引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
	<!-- 分类选中后效果脚本 -->
	<script type="text/javascript">
		$(document).ready(function() {
			$("nav ul li").each(function() {
				if ($(this)[0].href == String(window.location)) {
					$(this).addClass("on").siblings().removeClass("on");
				}
			});
		});
	</script>
</body>

</html>